<script lang="ts" setup>
// #region 引入包, 函数和组件
import { inject } from "vue"
import type { ProvideInject } from "../search.vue";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps<{ flag: number }>()
const emits = defineEmits<{
  (e: "update:flag", value: number): void
  (e: "getAdvice", value: string): void
}>()
const search = inject<ProvideInject>('search')
// #endregion

// #region // 变量
let timeoutId: null | number = null // 延时器的id
// #endregion

// #region // 函数
// input事件
const onInput = (e: any) => {
  // console.log(e.detail.value)
  // 将input框的值传回父组件
  if (!search) return
  search.changeSearchValue(e.detail.value)
  // 如果输入框的值是空字符串, 停止之前开的延时器并且显示热门搜索
  if (!e.detail.value) {
    if (timeoutId) clearTimeout(timeoutId)
    emits("update:flag", -1)
    // 不往下面执行了
    return
  }
  // 进行防抖处理
  // 如果timeoutId存在, 清除延时器重新再开启一个
  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    // 调用一次搜索建议接口
    emits("getAdvice", search.search_value.value)
    // 调用完成清除延时器
    if (timeoutId) clearTimeout(timeoutId)
  }, 400)
}
// 失焦事件
const onBlur = () => {
  if (!search) return
  // 如果此时输入框里面没有值
  if (!search.search_value.value) {
    // input的状态变回未聚焦前的样子
    search.changeInputIsFocus(false)
  }
}
// 键盘回车事件
const onKeyEnter = () => {
  // 调用父组件事件获取搜索结果并跳转到结果页面
  if (!search) return
  search.getSearchResult(search.search_value.value)
}
// 点击叉清空输入框
const clear = () => {
  if (!search) return
  search.changeSearchValue('')
}
// 点击取消
const cancel = () => {
  if (!search) return
  // 清空输入框
  clear()
  // 回到搜索热门
  emits("update:flag", -1)
  // 隐藏取消按钮
  search.changeInputIsFocus(false)
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="search_wrap" v-if="search">
    <view
      class="blur search_bar"
      v-if="!search.inputIsFocus.value"
      @click="search.inputIsFocus.value = true"
    >
      <uni-icons
        type="search"
        color="#c0c4cc"
      ></uni-icons>
      <view class="search_placeholder">请输入要搜索的歌曲/歌手</view>
    </view>
    <view
      class="focus search_bar"
      v-else
    >
      <uni-icons
        type="search"
        color="#808080"
      ></uni-icons>
      <input
        class="search_input"
        placeholder-class="search_placeholder"
        type="text"
        placeholder="请输入要搜索的歌曲/歌手"
        focus
        :value="search?.search_value.value"
        @input="onInput($event)"
        @blur="onBlur"
        @confirm="onKeyEnter"
      />
      <text
        class="cha"
        v-if="search?.search_value.value"
        @click="clear"
        >&times;</text
      >
    </view>
    <view
      class="cancel"
      v-if="search.inputIsFocus.value"
      @click="cancel"
      >取消</view
    >
  </view>
</template>

<style lang="scss" scoped>
.search_wrap {
  width: 100%;
  height: 112rpx;
  padding: 20rpx;
  display: flex;
  box-sizing: border-box;
}
.search_input {
  background: none;
}
.search_bar {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
  background: $uni-bg-color-grey;
  border-radius: $uni-border-radius-sm;
}
.blur {
  justify-content: center;
  .search_placeholder {
    height: 100%;
    line-height: 72rpx;
    color: #b3b3b3;
  }
}
.focus {
  position: relative;
  input {
    flex: 1;
  }
  .cha {
    position: absolute;
    color: #eee;
    background: rgba($color: #000000, $alpha: 0.6);
    width: 30rpx;
    height: 30rpx;
    text-align: center;
    line-height: 28rpx;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: 10rpx;
  }
}
.uni-icons {
  padding: 0 16rpx;
}
.search_placeholder {
  font-size: $uni-font-size-base;
  color: $uni-text-color-placeholder;
}
.cancel {
  height: 100%;
  line-height: 72rpx;
}
</style>
